<template>
  <div class="low-carbon-material-list">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <div class="g-flex">
          <el-button
            @click="handleAddOrEditMaterial()"
            type="primary"
            v-btnPermission="'PCF_LOW_CARBON_CREATE'"
          >
            <CIcon type="c-xian-xinjian" class="g-mr4"></CIcon>
            新增
          </el-button>
        </div>
      </template>
      <template #emissionFactorSlot="{ scope }">
        {{ `${empty(scope.row.emissionFactor)}${empty(scope.row.factorUnit)}` }}
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <AddOrEditLowCarbonMaterial
      v-model:visible="lowCarbonMaterialDialogVisible"
      :materialInfo="materialInfo"
      @refresh="refresh"
    ></AddOrEditLowCarbonMaterial>
    <CFootprintFactorDrawer
      v-model:visible="factorDialogVisible"
      @finish="handleChangeFactorSuccess"
    ></CFootprintFactorDrawer>
  </div>
</template>
<script lang="ts">
export default {
  name: 'LowCarbonMaterialList'
};
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import AddOrEditLowCarbonMaterial from './components/AddOrEditLowCarbonMaterial/index.vue';
import { CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import {
  postEditLowCarbonMaterial,
  postDeleteLowCarbonMaterial
} from '@/apis/system/config/lowCarbonMaterial';
import type { GetLowCarbonMaterialListResult } from '@/apis/system/config/model/lowCarbonMaterialModel';
import { useMessage } from '@/hooks/useMessage';
import { empty } from '@/utils/index';
import { useLowCarbonList } from './useLowCarbonList';
import CFootprintFactorDrawer from '@/businessComponents/CFootprintFactorDrawer/index.vue';

const { createMessage, createConfirm } = useMessage();
const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useLowCarbonList();
const options = reactive<CPageTableProps>({
  title: '低碳材料库',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting
});
const [registerPage, { refresh }] = useCPageTable(options);

const lowCarbonMaterialDialogVisible = ref(false);
const materialInfo = ref();

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: GetLowCarbonMaterialListResult): TableButtonItem[] {
  return [
    {
      text: '更换因子',
      btnPermission: 'PCF_LOW_CARBON_EDIT',
      onClick: () => handleChangeFactor(row)
    },
    {
      text: '删除',
      btnPermission: 'PCF_LOW_CARBON_DELETE',
      onClick: () => handleDel(row)
    }
  ];
}

const handleAddOrEditMaterial = (row?: GetLowCarbonMaterialListResult) => {
  lowCarbonMaterialDialogVisible.value = true;
  materialInfo.value = row || undefined;
};

const factorDialogVisible = ref(false);
const tempRow = ref<GetLowCarbonMaterialListResult>();
/**
 * 更换因子
 */
function handleChangeFactor(row: GetLowCarbonMaterialListResult) {
  console.log('handleChangeFactor');
  tempRow.value = row;
  factorDialogVisible.value = true;
}

async function handleChangeFactorSuccess(row: any) {
  console.log('handleChangeFactorSuccess', row);
  if (!tempRow.value?.relationNo) {
    createMessage.error('系统异常，请刷新重试!');
    return;
  }
  try {
    await postEditLowCarbonMaterial(tempRow.value.relationNo, row.factorNo);
    createMessage.success(`更换因子成功！`);
    refresh(true);
  } catch (error) {
    console.log('error', error);
  }
}

const handleDel = async (row: GetLowCarbonMaterialListResult) => {
  createConfirm('确定删除该低碳材料吗？', '删除后不可恢复！', {
    iconType: 'warning'
  }).then(async () => {
    await postDeleteLowCarbonMaterial(row.relationNo);
    createMessage.success(`低碳材料删除成功！`);
    refresh(true);
  });
};
</script>
